<template>
  <div class="app-container">
    <div class="main">
      <div class="title">基础信息</div>
      <el-form style="margin-top:20px" :model="ruleForm" :inline="true" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="分佣机制编号" prop="commissionCode">
          <el-input maxlength="16" placeholder="请输入分佣机制编号" v-model="ruleForm.commissionCode"></el-input>
        </el-form-item>
        <el-form-item label="规则名称" prop="ruleName">
          <el-input maxlength="32" placeholder="请输入规则名称" v-model="ruleForm.ruleName"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <div class="main">
      <div class="title">佣金占比设置</div>
      <el-form style="margin-top:20px" :model="yjruleForm" ref="yjruleForm" label-width="150px" class="demo-ruleForm">
        <el-form-item label="A级经纪人成交：">
           <el-checkbox v-model="amCommissionRuleVos.commissionRateA.statusA" style="margin:0" label="A级经纪人分佣占比" name="type"></el-checkbox>
          <el-input style="width:50px" v-model="amCommissionRuleVos.commissionRateA.commissionRateA"></el-input>
          <span>%</span>
        </el-form-item>
        <el-form-item label="B级经纪人成交：">
            <el-checkbox v-model="amCommissionRuleVos.commissionRateB.statusA" style="margin:0" label="A级经纪人分佣占比" name="type"></el-checkbox>
            <el-input style="width:50px" v-model="amCommissionRuleVos.commissionRateB.commissionRateA"></el-input>
            <span>%</span>
            <el-checkbox v-model="amCommissionRuleVos.commissionRateB.statusB" style="margin:0;margin-left:30px" label="B级经纪人分佣占比" name="type"></el-checkbox>
            <el-input style="width:50px" v-model="amCommissionRuleVos.commissionRateB.commissionRateB"></el-input>
            <span>%</span>
        </el-form-item>
        <el-form-item label="C级经纪人成交：">
            <el-checkbox v-model="amCommissionRuleVos.commissionRateC.statusA" style="margin:0" label="A级经纪人分佣占比" name="type"></el-checkbox>
            <el-input style="width:50px" v-model="amCommissionRuleVos.commissionRateC.commissionRateA"></el-input>
            <span>%</span>
            <el-checkbox v-model="amCommissionRuleVos.commissionRateC.statusB" style="margin:0;margin-left:30px" label="B级经纪人分佣占比" name="type"></el-checkbox>
            <el-input style="width:50px" v-model="amCommissionRuleVos.commissionRateC.commissionRateB"></el-input>
            <span>%</span>
            <el-checkbox v-model="amCommissionRuleVos.commissionRateC.statusC" style="margin:0;margin-left:30px" label="C级经纪人分佣占比" name="type"></el-checkbox>
            <el-input style="width:50px" v-model="amCommissionRuleVos.commissionRateC.commissionRateC"></el-input>
            <span>%</span>
        </el-form-item>
      </el-form>
    </div>

    <div class="main">
      <div class="title">佣金规则绑定</div>
      <div style="margin-top:30px">
        <!-- <tree-transfer :from_data='fromData' :to_data='toData' :defaultProps="{label:'label'}" @addBtn='add' @removeBtn='remove' @right-check-change="rcchang" :mode='mode' height='540px' openAll>
        </tree-transfer> -->
        <el-tree
          ref="tree"
          :data="projectTree"
          show-checkbox
          node-key="id"
          default-expand-all
          @current-change="currentchange"
          :default-checked-keys="defaultcheckedkeys"
          :props="defaultProps">
        </el-tree>
      </div>
    </div>

    <div class="buttons">
      <el-button @click="close">返回</el-button>
      <el-button type="primary" @click="dialogVisible = true">保存</el-button>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>{{id?"数据已被修改是否继续保存？":"该功能为核心功能，已仔细检查？"}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import treeTransfer from 'el-tree-transfer' // 引入
import { listCommissionrule, getCommissionrule, delCommissionrule, addCommissionrule, updateCommissionrule, exportCommissionrule } from "@/api/commissionrule/commissionrule";
import { projectTree } from "@/api/project/project";


export default {
  name: "CommissionruleDetail",
  components:{ treeTransfer }, // 注册
  data() {
    // const generateData = _ => {
    //   const data = [];
    //   for (let i = 1; i <= 15; i++) {
    //     data.push({
    //       key: i,
    //       label: `备选项 ${ i }`,
    //       disabled: i % 4 === 0
    //     });
    //   }
    //   return data;
    // };
    return {
      data:{},
      id:undefined,
      ruleForm:{
        commissionCode:"",
        ruleName:''
      },
      rules: {
        commissionCode: [
          { required: true, message: '请输入分佣机制编号', trigger: 'blur' }
        ],
        ruleName: [
          { required: true, message: '请输入规则名称', trigger: 'blur' }
        ]
      },
      yjruleForm:{

      },
      //默认选中
      defaultcheckedkeys:[],
      //树
      projectTree: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      //前端显示数据
      amCommissionRuleVos:{
        id:null,
        ruleName:null,
        amCommissionRule:{
          id:null,
          commissionCode:null,
          ruleName:null,
        },
        commissionRateA:{
          ruleId:null,
          grade:"A",
          commissionRateA:0,
          statusA:0,
        },
        commissionRateB:{
          ruleId:null,
          grade:"B",
          commissionRateA:0,
          statusA:0,
          commissionRateB:0,
          statusB:0,
        },
        commissionRateC:{
          ruleId:null,
          grade:"C",
          commissionRateA:0,
          statusA:0,
          commissionRateB:0,
          statusB:0,
          commissionRateC:0,
          statusC:0,
        },
        amRuleBindings:[]
      },
      //用来对比的json数组
      JSONamCommissionRuleVos:'',
      //返给后端的数据
      amCommissionRuleVo:{
        // id:null,
        // ruleName:null,
        // amCommissionRule:{
        //   id:null,
        //   commissionCode:null,
        //   ruleName:null,
        // },
        // commissionRateA:{
        //   ruleId:null,
        //   grade:"A",
        //   commissionRateA:null,
        //   statusA:0,
        // },
        // commissionRateB:{
        //   ruleId:null,
        //   grade:"B",
        //   commissionRateA:null,
        //   statusA:0,
        //   commissionRateB:null,
        //   statusB:0,
        // },
        // commissionRateC:{
        //   ruleId:null,
        //   grade:"C",
        //   commissionRateA:null,
        //   statusA:0,
        //   commissionRateB:null,
        //   statusB:0,
        //   commissionRateC:null,
        //   statusC:0,
        // },
        // amRuleBindings:[]
      },
      dialogVisible: false
    }
  },
  created() {
    var id=this.$route.query.id
    if(id){
      this.id=id

      this.getData()
    }else{
      this.getTree()
      // projectTree
    }
  },
  methods:{
    getData(){
      getCommissionrule(this.id).then(response => {
        var data = response.data;
        this.projectTree=data.projectTree
        this.defaultcheckedkeys=data.checked
        this.ruleForm={
          commissionCode:data.amCommissionRule.commissionCode,
          ruleName:data.amCommissionRule.ruleName,
        }
        this.amCommissionRuleVos={
          id:data.id,
          ruleName:data.amCommissionRule.ruleName,
          amCommissionRule:{
            id:data.amCommissionRule.id,
            commissionCode:data.amCommissionRule.commissionCode,
            ruleName:data.amCommissionRule.ruleName,
          },
          commissionRateA:{
            ruleId:data.commissionRateA.id,
            grade:"A",
            commissionRateA:data.commissionRateA.commissionRateA,
            statusA:data.commissionRateA.statusA=="1"?true:false,
          },
          commissionRateB:{
            ruleId:data.commissionRateB.id,
            grade:"B",
            commissionRateA:data.commissionRateB.commissionRateA,
            statusA:data.commissionRateB.statusA=="1"?true:false,
            commissionRateB:data.commissionRateB.commissionRateB,
            statusB:data.commissionRateB.statusA=="1"?true:false,
          },
          commissionRateC:{
            ruleId:null,
            grade:"C",
            commissionRateA:data.commissionRateC.commissionRateA,
            statusA:data.commissionRateC.statusA=="1"?true:false,
            commissionRateB:data.commissionRateC.commissionRateB,
            statusB:data.commissionRateC.statusB=="1"?true:false,
            commissionRateC:data.commissionRateC.commissionRateC,
            statusC:data.commissionRateC.statusC=="1"?true:false,
          },
          amRuleBindings:data.checked
        }

        this.JSONamCommissionRuleVos=JSON.stringify(this.amCommissionRuleVos)
      });
    },
    getTree(){
      projectTree(-1).then(response => {
        // this.data = response.data;
        this.projectTree=response.data
      });
    },
    /** 提交按钮 */
    submitForm: function() {

      var nodes=this.$refs.tree.getCheckedNodes()
      var arr=[]
      nodes.forEach(item=>{
        if(!item.children){
          arr.push(item.id)
        }
      })
      this.amCommissionRuleVos.ruleName=this.ruleForm.ruleName
      this.amCommissionRuleVos.amCommissionRule.commissionCode=this.ruleForm.commissionCode
      this.amCommissionRuleVos.amCommissionRule.ruleName=this.ruleForm.ruleName
      this.amCommissionRuleVos.amRuleBindings=arr
      this.amCommissionRuleVo=JSON.parse(JSON.stringify(this.amCommissionRuleVos))
      this.amCommissionRuleVo.commissionRateA.statusA=this.amCommissionRuleVos.commissionRateA.statusA?1:0
      this.amCommissionRuleVo.commissionRateB.statusA=this.amCommissionRuleVos.commissionRateB.statusA?1:0
      this.amCommissionRuleVo.commissionRateB.statusB=this.amCommissionRuleVos.commissionRateB.statusB?1:0
      this.amCommissionRuleVo.commissionRateC.statusA=this.amCommissionRuleVos.commissionRateC.statusA?1:0
      this.amCommissionRuleVo.commissionRateC.statusB=this.amCommissionRuleVos.commissionRateC.statusB?1:0
      this.amCommissionRuleVo.commissionRateC.statusC=this.amCommissionRuleVos.commissionRateC.statusC?1:0
      console.log(this.amCommissionRuleVo)
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          if (this.id != undefined) {
            updateCommissionrule(JSON.stringify(this.amCommissionRuleVo)).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.$router.back()
              }
            });
          } else {
            addCommissionrule(JSON.stringify(this.amCommissionRuleVo)).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                // this.open = false;
                // this.getList();
                this.$router.back()
              }
            });
          }
        }
      });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    currentchange(data,i){
      console.log(data)
      console.log(i)
    },
    /** 关闭按钮 */
    close() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({ path: "/agent/commissionrule", query: { t: Date.now()}})
    }

    // // 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
    // changeMode() {
    //   if (this.mode == "transfer") {
    //     this.mode = "addressList";
    //   } else {
    //     this.mode = "transfer";
    //   }
    // },
    // // 监听穿梭框组件添加
    // add(fromData,toData,obj){
    //   // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的        {keys,nodes,halfKeys,halfNodes}对象
    //   // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
    //   console.log("fromData:", fromData);
    //   console.log("toData:", toData);
    //   console.log("obj:", obj);
    // },
    // // 监听穿梭框组件移除
    // remove(fromData,toData,obj){
    //   // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
    //   // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
    //   console.log("fromData:", fromData);
    //   console.log("toData:", toData);
    //   console.log("obj:", obj);
    // },
    // rcchang(nodeObj, treeObj, checkAll){
    //   console.log(nodeObj)
    //   console.log(treeObj)
    //   console.log(checkAll)
    // }
  }
}
</script>

<style scoped>
.title{
  line-height: 40px;
  border-bottom: 1px solid #999;
}
.buttons{
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
